<template>
  <div class="search">
    
      <div class="ser">
        <van-nav-bar left-arrow @click-left="$router.back()">
          <template #left>
            <van-icon name="arrow-left" size="26" color="#000" />
          </template>
        </van-nav-bar>
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
        </div>
   
      <div class="top10" @scroll="scrollMe" ref="main">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ul :class="isShow ? 'prolist2' : 'prolist1'">
            <li
              class="van-hairline--bottom"
              v-for="(item, index) in list"
              :key="index"
              @click="jumpTo(item.proid)"
            >
              <img :src="item.img1" alt="" />
              <div class="jdcc">
                <h4>
                  <div class="van-multi-ellipsis--l2">
                    {{ item.proname }}
                  </div>
                </h4>
                <p class="price">￥{{ item.originprice }}</p>
              </div>
            </li>
            <div class="toggle" @click="isShow = !isShow">
              <van-icon name="bars" v-if="isShow" />
              <van-icon name="apps-o" v-else />
            </div>
          </ul>
        </van-list>
      </div>

      <div class="top" v-if="scrollTop>200" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>

</template>

<script>
import { getSearchList } from "../api/kind";
export default {
  data() {
    return {
      value: "",
      val: "",
     list:"",
      loading: false,
      finished: false,
      isShow: true,
      scrollTop: 0,
      timer: null,
      count:1
    };
  },
  methods: {
     onSearch() {
 
    },
    onCancel() {
      alert('取消');
    },
    onLoad() {

 
setTimeout(() => {
        getSearchList({ count: this.count, limitNum: 12 ,keyword:this.$route.params.keyword}).then((data) => {
            //this.proList=data.data.data
            this.value=this.$route.params.keyword
            this.loading = false;
            if (!data.data.data) {
              this.finished = true;
            } else {
              this.list = [...this.list, ...data.data.data];
              this.count++;
            }
          });
      }, 1000);

     
  },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    },
        scrollMe(){
      this.scrollTop=this.$refs.main.scrollTop
    },
    backTop(){
    
      this.timer=setInterval(()=>{
          if(this.$refs.main.scrollTop<=0){
          
        clearInterval(this.timer)
      }
        this.$refs.main.scrollTop-=100
      },15)
     
    },
  }}
</script>

<style scoped>
.search{
  height: 100%;
}
.top10 {
  margin-top: 10px;
  background: #fff;
  flex: 1; 
 
}

.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.prolist1 li {
  width: 49%;
}
.prolist1 li img {
  width: 100%;
}
.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 0.8rem;
}
/* .prolist2 li div {
  flex: 1;
} */
.toggle {
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  height: 0.3rem;
  width: 0.3rem;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  line-height: 0.3rem;
}
.ser{

    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>